@import '../_theme.less';

.hairline-top(@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: @size;
  border-top: @size solid @c;
  z-index: 1;
}

.hairline-right(@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: @size;
  border-left: @size solid @c;
  color: @c;
  z-index: 1;
}

.hairline-bottom(@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: @size;
  border-bottom: @size solid @c;
  color: @c;
  z-index: 1;
}

.hairline-left(@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: @size;
  border-left: @size solid @c;
  color: @c;
  z-index: 1;
}

.hairline-vertical (@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  border: 0 solid @c;
  border-top-width: @size;
  border-bottom-width: @size;
  z-index: 1;
}

.hairline-horizontal (@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  border: 0 solid @c;
  border-top-width: @size;
  border-bottom-width: @size;
  z-index: 1;
}

.hairline (@c: @divider-color-normal, @size: 1rpx) {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  border: 0 solid @c;
  border-width: @size;
  z-index: 1;
}
